<template>
  <div>
    <div class="tabs">
      <button v-for="(item,index) in tabs" :key="item" @click="activeIndex=index" :class="activeIndex===index && 'active'">{{item}}</button>
      
    </div>
    <div class="content" v-for="(item,index) in contents" :key="item" v-show="activeIndex===index" >{{item}}</div>
   

  </div>
</template>

<script>
  export default {
    data() {
      return {
       tabs:['按钮1','按钮2','按钮3'],
       contents:['内容1','内容2','内容3'],
       activeIndex:0  //初始化显示索引
      }
    },
  }
</script>

<style lang="scss" scoped>
button{
  margin: 20px;
}
.content{
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: burlywood;
}
.active{
  background-color: aquamarine;
}
</style>